<!DOCTYPE HTML>
<html>
<head>
    <title>部落管理</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/scripts/boot.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
    <link rel="stylesheet" href="/editor/common.css">
    <script src="/scripts/miniui/miniui.js"></script>
</head>
<body style="padding: 0;width: 100%;height: 98%">
<div class="mini-splitter" style="width:100%;height:100%;">
    <div size="100" showCollapseButton="true">
        <div class="mini-fit">
            <ul id="tree1" class="mini-tree" url="/tribeRoute/tribeMGTree" style="width:100%;"
                showTreeIcon="true" textField="name" idField="id" value="0" parentField="pid" resultAsTree="false"
            >
            </ul>
        </div>
    </div>
    <div showCollapseButton="true">
        <div id="outImg">
            <img id="imgId" src="" alt="" onclick="smallImg()">
        </div>
        <div style="padding: 5px">
            <span>部落名称：</span><input class="mini-textbox" type="text" id="name"/>
            <span>部落ID：</span><input class="mini-textbox" type="text" id="objectId"/>
            <span>创建人ID：</span><input class="mini-textbox" type="text" id="creater"/>
            <span>创建人：</span><input class="mini-textbox" type="text" id="nickName"/>
            <span>部落号：</span><input class="mini-textbox" type="text" id="numNumber"/>
            <a class="mini-button" iconCls="icon-search" onclick="search()">查找</a>
        </div>
        <div style="width:99%;">
            <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
                <table style="width:100%;">
                    <tr>
                        <td style="width:100%;">
                            <a class="mini-button" iconCls="icon-add" onclick="tribeMGAdd()">增加</a>
                            <a class="mini-button" iconCls="icon-edit" onclick="tribeMGEdit()">编辑</a>
                            <a name='sortBtn' id="sortBtn" class="mini-button" iconCls="icon-add"
                               onclick="tribeMGSort()">排序</a>
                            <a class="mini-button" iconCls="icon-remove" onclick="tribeMGRemove()">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div id="datagrid1" class="mini-datagrid" style="width:99%;height: 48%;"
             url="/tribeRoute/tribeMG" idField="id" allowResize="true" onselectionchanged="onSelectionChanged"
             sizeList="[20,30,50,100]" pageSize="20"
        >
            <!--allowCellEdit="true" allowCellSelect="true" multiSelect="true"-->
            <div property="columns">
                <div type="checkcolumn" width="20"></div>
                <div field="recommendOId" width="0">推荐部落表ID</div>
                <div field="objectId" width="80" align="center" headerAlign="center">部落ID</div>
                <div field="creater" width="80" align="center" headerAlign="center">创建人ID</div>
                <div field="nickName" width="80" align="center" headerAlign="center">创建人</div>
                <div field="name" width="50" align="center" headerAlign="center">部落名称</div>
                <div field="tribeAvator" width="30" align="center" headerAlign="center">部落头像</div>
                <div field="category" width="30" align="center" headerAlign="center">分类</div>
                <div field="num" width="50" align="center" headerAlign="center">部落号</div>
                <!--<div field="rule" width="50" align="center" headerAlign="center"   >部落公告</div>-->
                <div field="introduction" width="50" align="center" headerAlign="center">部落公告</div>
                <div field="qrCode" width="40" align="center" headerAlign="center">部落二维码</div>
                <div field="capacity" width="40" align="center" headerAlign="center">部落规模</div>
                <div field="memberNum" width="40" align="center" headerAlign="center">成员数量</div>
                <div field="postNum" width="40" align="center" headerAlign="center">帖子数量</div>
                <div field="isPublic" width="40" align="center" headerAlign="center">是否公开</div>
                <div field="status" width="40" align="center" headerAlign="center">部落状态</div>
                <div field="verify" width="40" align="center" headerAlign="center">认证方式</div>
                <div field="verifyCost" width="40" align="center" headerAlign="center">付费金额</div>
                <div field="generalize" width="40" align="center" headerAlign="center">推广分成</div>
                <div field="sortDate" width="60" align="center" headerAlign="center">排序</div>
                <!--<div field="sort" width="40" align="center" headerAlign="center">推荐排序-->
                <!--<input property="editor" class="mini-spinner"  minValue="1" maxValue="20"/>-->
                <!--</div>-->
                <div field="sort" width="40" align="center" headerAlign="center">推荐排序</div>
                <div field="createdAt" width="40" align="center" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss">
                    创建日期
                </div>
                <div field="updatedAt" width="40" align="center" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss">
                    更新日期
                </div>
            </div>
        </div>
        <div style="padding: 5px">
            <span>成员ID：</span><input class="mini-textbox" type="text" id="memberId"/>
            <span>成员名称：</span><input class="mini-textbox" type="text" id="memberName"/>
            <span>成员类型：</span><input class="mini-combobox" type="text" value="-2" data="memberType" id="memberType"/>
            <a class="mini-button" iconCls="icon-search" onclick="searchMembers()">查找</a>
        </div>
        <div style="width:99%;">
            <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
                <table style="width:100%;">
                    <tr>
                        <td style="width:100%;">
                            <a class="mini-button" iconCls="icon-add" onclick="tribeMemberAdd()">增加</a>
                            <a class="mini-button" iconCls="icon-edit" onclick="tribeMemberEdit()">编辑</a>
                            <a class="mini-button" iconCls="icon-add" onclick="tribeMemberAddBlack()">拉黑</a>
                            <a class="mini-button" iconCls="icon-remove" onclick="tribeMemberRemove()">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="datagrid2" class="mini-datagrid" style="width:99%;height:37%;" url="/tribeRoute/getTribeMembersInfo"
             sizeList="[20,30,50,100]" pageSize="20" onselectionchanged="onSelectedChanged" allowResize="true">
            <!--idField="id" allowResize="true" sizeList="[20,30,50,100]" pageSize="20"-->
            <div property="columns">
                <div type="checkcolumn" width="15"></div>
                <div field="tirbeMemberId" width="0">tirbeMember表Id</div>
                <div field="userId" width="60" align="center" align="center" headerAlign="center">成员ID</div>
                <div field="userNickName" width="80" align="center" align="center" headerAlign="center">成员名</div>
                <div field="userAvatar" width="30" align="center" headerAlign="center">成员头像</div>
                <div name="action" width="20" headerAlign="center" align="center" renderer="onActionRenderer"
                     cellStyle="padding:0;">黑名单
                </div>
                <div name="action" width="20" headerAlign="center" align="center" renderer="onActionRenderer"
                     cellStyle="padding:0;">管理员
                </div>
                <div name="action" width="20" headerAlign="center" align="center" renderer="onActionRenderer"
                     cellStyle="padding:0;">普通成员
                </div>
                <div field="userQrCode" width="40" align="center" headerAlign="center">成员二维码</div>
                <div field="userType" width="30" align="center" headerAlign="center" data="memberType">成员类型</div>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">
    var flag = 1;
    var tribeOId;
    var tribeName;
    var tribeCategory = '推荐';
    var memberType = [{id: -2, text: ' '}, {id: -1, text: '非成员'}, {id: 0, text: '黑名单'}, {id: 1, text: '创建者'}, {
        id: 2,
        text: '管理员'
    }, {id: 3, text: '成员'}];
    mini.parse();
    var tree = mini.get("tree1");
    var grid = mini.get("datagrid1");
    var grid2 = mini.get("datagrid2");
    tree.on("nodeselect", function (e) {
        if (e.isLeaf) {
            tribeCategory = e.node.name;
            if (tribeCategory == '推荐') {
                mini.get("sortBtn").show();
            } else {
                mini.get("sortBtn").hide();
            }
            grid.load({dept_id: e.node.name});
            tribeOId = '';
            grid2.setData([]);
            grid2.setTotalCount(0);
        } else {
            grid.setData([]);
            grid.setTotalCount(0);
        }
    });
    grid.load({dept_id: '推荐'});
    grid.on("drawcell", function (e) {
        var value = e.value;
        var column = e.column;
        if (column.field == "tribeAvator") {
            if (value) {
                e.cellHtml = '<img class="bigImg" onclick="bigImg()" src="' + value + '?imageMogr2/thumbnail/640x/format/jpg/interlace/1/auto-orient" width="30" height="30" alt="图片">';
            } else {
                e.cellHtml = '<img class="bigImg" onclick="bigImg()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }

        if (column.field == "qrCode") {
            if (value) {
                e.cellHtml = '<img class="bigImg" onclick="bigImgCode()" src="' + value + '" width="30" height="30" alt="图片">';
            } else {
                e.cellHtml = '<img class="bigImg" onclick="bigImgCode()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }

        if (column.field == "isPublic") {
            parseInt(value)
            if (value == 0) {
                e.cellHtml = '<text>私有</text>';
            } else if (value == 1) {
                e.cellHtml = '<text>公开</text>';
            }
        }

        if (column.field == "status") {
            parseInt(value)
            if (value == -1) {
                e.cellHtml = '<text>删除</text>';
            } else if (value == 0) {
                e.cellHtml = '<text>锁定</text>';
            } else if (value == 1) {
                e.cellHtml = '<text>正常</text>';
            }
        }

        if (column.field == "verify") {
            parseInt(value)
            if (value == 1) {
                e.cellHtml = '<text>无需验证</text>';
            } else if (value == 2) {
                e.cellHtml = '<text>需要验证</text>';
            } else if (value == 3) {
                e.cellHtml = '<text>付费加入</text>';
            } else if (value == 4) {
                e.cellHtml = '<text>禁止加入</text>';
            }
        }
        if (column.field == "generalize") {
            parseInt(value)
            if (value == 0) {
                e.cellHtml = '<text>关闭</text>';
            } else if (value == 1) {
                e.cellHtml = '<text>开启</text>';
            }
        }
    });

    function search() {
        var name = mini.get("name").getValue();
        var objectId = mini.get("objectId").getValue();
        var creater = mini.get("creater").getValue();
        var nickName = mini.get("nickName").getValue();
        var numNumber = mini.get("numNumber").getValue();
        if (name == "" && objectId == "" && creater == "" && nickName == "" && numNumber == "") {
            alert('请输入查询条件！')
        } else {
            grid.load({
                name: name,
                objectId: objectId,
                creater: creater,
                nickName: nickName,
                numNumber: numNumber,
            });
        }
    }
    function searchStatus() {
        var status = mini.get("status").getValue();
        grid.load({
            status: status
        });
    }
    $("#name,#objectId,#creater,#nickName，#numNumber").bind("keydown", function (e) {
        if (e.keyCode == 13) {
            search();
        }
    });
    function tribeMGAdd() {

        if (tribeCategory == '推荐') {
            mini.open({
                url: "/tribeRoute/tribeAdd",
                title: "新增推荐部落", width: 600, height: 400,
                ondestroy: function (action) {
                    tribeOId = '';
                    grid.reload();
                    grid2.setData([]);
                    grid2.setTotalCount(0);
                }
            });
        } else {
            mini.open({
                url: "/tribeRoute/tribeMGAdd",
                title: "新增部落", width: 600, height: 400,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = {action: "add"};
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {
                    tribeOId = '';
                    grid.reload();
                    grid2.setData([]);
                    grid2.setTotalCount(0);
                }
            });
        }
    }

    function tribeMGEdit() {
        var row = grid.getSelected();
        if (row) {
//      console.log(row.objectId);
            mini.open({
                    url: "/tribeRoute/tribeMGEdit?id=" + row.objectId,
                title: "编辑部落信息", width: 600, height: 500,
                ondestroy: function (action) {
                    tribeOId = '';
                    grid.reload();
                    grid2.setData([]);
                    grid2.setTotalCount(0);
                }
            });
        } else {
            alert("请选中一条记录");
        }
    };
    function tribeMGSort() {
        var row = grid.getSelected();
        if (row) {
            var data = {};
            var tribeName = row.name;
            var tribeId = row.objectId;
            var createrName = row.nickName;
            var createrId = row.creater;
            var sort = row.sort;
            var recommendOId = row.recommendOId;
            data.action = 'sort';
            data.tribeCategory = tribeCategory;
            data.tribeName = tribeName;
            data.tribeId = tribeId;
            data.createrName = createrName;
            data.createrId = createrId;
            data.sort = sort;
            data.recommendOId = recommendOId;

            mini.open({
                url: "/tribeRoute/tribeMGSort",
                title: "部落排序", width: 600, height: 200,
                onload: function () {
                    var iframe = this.getIFrameEl();
//          var datas = { action: "sort", id: row.id };
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {
                    tribeOId = '';
                    grid.reload();
                    grid2.setData([]);
                    grid2.setTotalCount(0);
                }
            });
        } else {
            alert("请选中一条记录");
        }
    };
    function tribeMGRemove() {
        var row = grid.getSelected();
        if (row) {
          if (tribeCategory == '推荐') {
            var recommendOId  = row.recommendOId;
            $.ajax({
              url: "/tribeRoute/tribeMGRecommendRemove",
              type: 'post',
              data: {objectId: recommendOId},
              cache: false,
              success: function (result) {
//            console.log(result);
                if (result) {
                  alert('推荐部落删除成功！');
                } else {
                  alert('推荐部落删除失败，请重试！');
                  return;
                }
                tribeOId = '';
                grid.reload();
              },
              error: function (error) {
                console.log(error)
              }
            });
          } else {
            var objectId = row.objectId;
            var status = row.status;
            if (status == '-1') {
              alert('部落已经是删除状态！');
              return;
            } else {
              $.ajax({
                url: "/tribeRoute/tribeMGRemove",
                type: 'post',
                data: {objectId: objectId},
                cache: false,
                success: function (result) {
//            console.log(result);
                  var funResult = JSON.parse(result);
                  if (funResult.status === '-1' && funResult.objectId === objectId) {
                    alert('部落删除成功！');
                  } else {
                    alert('部落删除失败，请重试！');
                    return;
                  }
                  tribeOId = '';
                  grid.reload();
                },
                error: function (error) {
                  console.log(error)
                }
              });
            }
          }
        } else {
            alert("请选中一条记录");
        }
    };

    function bigImg() {
        var row = grid.getSelected();
        if (row) {
            if (flag == 1) {
                var path = row.tribeAvator;
                console.log(path);
                $("#imgId").attr('src', path);
                $("#outImg").css('display', 'block');
            }
        }
    }
    function bigImgCode() {
        var row = grid.getSelected();
        if (row) {
            if (flag == 1) {
                var path = row.qrCode;
                $("#imgId").attr('src', path);
                $("#outImg").css('display', 'block');
            }
        }
    }
    function smallImg() {
        $("#outImg").css('display', 'none');
    }


    function onBirthdayRenderer(e) {
        var value = e.value;
        if (value) return mini.formatDate(value, 'yyyy-MM-dd hh:mm:ss');
        return "";
    };

    function onSelectionChanged(e) {
        var tribeGrid = e.sender;
//    tribeGrid.setStyle('height: 52%;');
//    grid2.setStyle('height: 47%;');
        var record = tribeGrid.getSelected();
        if (record) {
            tribeOId = record.objectId;
            tribeName = record.name;
            grid2.load({tribeOId: record.objectId});
        }
    }

    grid2.on("drawcell", function (e) {
        var value = e.value;
        var column = e.column;
        if (column.field == "userAvatar") {
            if (value) {
                e.cellHtml = '<img class="bigImg" onclick="userBigImg()" src="' + value + '?imageMogr2/thumbnail/640x/format/jpg/interlace/1/auto-orient" width="30" height="30" alt="图片">';
            } else {
                e.cellHtml = '<img class="bigImg" onclick="userBigImg()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }

        if (column.field == "userQrCode") {
            if (value) {
                e.cellHtml = '<img class="bigImg" onclick="userBigImgCode()" src="' + value + '" width="30" height="30" alt="图片">';
            } else {
                e.cellHtml = '<img class="bigImg" onclick="userBigImgCode()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }
        if (column.field == "userType") {
//      console.log(value);
            parseInt(value)
            if (value == -1) {
                e.cellHtml = '<text>非成员</text>';
            } else if (value == 0) {
                e.cellHtml = '<text>黑名单</text>';
            } else if (value == 1) {
                e.cellHtml = '<text>创建者</text>';
            } else if (value == 2) {
                e.cellHtml = '<text>管理员</text>';
            } else if (value == 3) {
                e.cellHtml = '<text>成员</text>';
            }
        }
    });
    function userBigImg() {
        var row = grid2.getSelected();
        if (row) {
            if (flag == 1) {
                var path = row.userAvatar;
                $("#imgId").attr('src', path);
                $("#outImg").css('display', 'block');
            }
        }
    };
    function userBigImgCode() {
        var row = grid2.getSelected();
        if (row) {
            if (flag == 1) {
                var path = row.userQrCode;
                $("#imgId").attr('src', path);
                $("#outImg").css('display', 'block');
            }
        }
    };

    function searchMembers() {
        var nickName = mini.get("memberName").getValue();
        var userOId = mini.get("memberId").getValue();
        var userType = mini.get("memberType").getValue();
//    console.log(tribeId);
        if (tribeOId == "" || tribeOId == undefined || tribeOId == null) {
            alert('请先选择一个部落');
            return;
        }
        ;
        if (nickName == "" && userOId == "" && userType == "") {
            alert('请输入查询条件！');
            return;
        } else {
            grid2.load({
                tribeOId: tribeOId,
                nickName: nickName,
                userOId: userOId,
                userType: userType,
            });
        }
    }
    $("#tribeId,#memberName,#memberId,#memberType").bind("keydown", function (e) {
        if (e.keyCode == 13) {
            searchMembers();
        }
    });
    function onSelectedChanged(e) {
        var tribeMemberGrid = e.sender;
        var record = tribeMemberGrid.getSelected();
        if (record) {
            userOId = record.userOId;
//      grid2.load({tribeOId:record.objectId});
        }
    };
    function tribeMemberAdd() {
        if (tribeOId == "" || tribeOId == undefined || tribeOId == null) {
            alert('请先选择一个部落');
            return;
        }
        ;
        mini.open({
            url: "/tribeRoute/tribeMemberAdd?tribeOId=" + tribeOId + "&tribeName=" + tribeName,
            title: "添加部落成员", width: 600, height: 200,
            onload: function () {
                var iframe = this.getIFrameEl();
                var data = {action: "add"};
                iframe.contentWindow.SetData(data);
            },
            ondestroy: function (action) {
//        tribeOId = '';
//        grid.reload();
                grid2.reload();
            }
        });
    };
    function tribeMemberEdit() {
        var data = {};
        var row = grid.getSelected();
        if (row) {
            var tribeOId = row.objectId;
            var tribeName = row.name;
            data.tribeOId = tribeOId;
            data.tribeName = tribeName;
        } else {
            alert("请选中一个部落!");
            return;
        }
        ;
        var row2 = grid2.getSelected();
        if (row2) {
            var userId = row2.userId;
            var memberName = row2.userNickName;
            var userType = row2.userType;
            var tirbeMemberId = row2.tirbeMemberId;
            data.tirbeMemberId = tirbeMemberId;
            data.userId = userId;
            data.memberName = memberName;
            data.userType = userType;
        } else {
            alert("请选中一个成员!");
            return;
        }
        ;
//    console.log(data);
        mini.open({
            url: "/tribeRoute/tribeMemberEdit",
            title: "编辑部落成员", width: 600, height: 220,
            onload: function () {
                var iframe = this.getIFrameEl();
//          var datas = { action: "sort", id: row.id };
                iframe.contentWindow.SetData(data);
            },
            ondestroy: function (action) {
                grid2.reload();
            }
        });
    };
    function tribeMemberAddBlack() {
        delAndBlack('0');
    };
    function tribeMemberRemove() {
        delAndBlack('-1');
    };
    function delAndBlack(newUserType) {
        var data = {};
        var row = grid.getSelected();
        if (row) {
            var tribeOId = row.objectId;
            var tribeName = row.name;
            data.tribeOId = tribeOId;
            data.tribeName = tribeName;
        } else {
            alert("请选中一个部落!");
            return;
        }
        ;
        var row2 = grid2.getSelected();
        if (row2) {
            var userId = row2.userId;
            var memberName = row2.userNickName;
            var userType = row2.userType;
            var tirbeMemberId = row2.tirbeMemberId;
            data.tirbeMemberId = tirbeMemberId;
            data.userId = userId;
            data.memberName = memberName;
            data.userType = newUserType;
            data.oldUserType = userType;
        } else {
            alert("请选中一个成员!");
            return;
        }
        ;
//    console.log(data);
        $.ajax({
            url: "/tribeRoute/tribeMemberEditHandle",
            type: 'post',
            data: data,
            cache: false,
            success: function (res) {
                var resultData = JSON.parse(res);
                alert(resultData);
                grid2.reload();
            },
            error: function (error) {
                console.log(error)
            }
        });
    }
    function onActionRenderer(e) {

        var grid = e.sender;
        var record = e.record;
        var uid = record._uid;
        var userType = record.userType;
        var column = e.columnIndex;
        var s;
        var mark = true;
        var status;
        if ((column == 5 && userType == 0) || (column == 6 && userType == 2) || (column == 7 && userType == 3) || userType == 1) {
            mark = false
        }
        if (column == 5) {
            status = 0
        } else if (column == 6) {
            status = 2
        } else if (column == 7) {
            status = 3
        }
        if (mark) {
            s = '<a class="Edit_Button" href="javascript:permit(\'' + status + '\',\'' + uid + '\')">加入</a> '
        }
        return s;
    };
    function permit(userType, row_uid) {
        var row = grid2.getRowByUID(row_uid);
        if (row) {
            var data = {};
            var objectId = row.tirbeMemberId;
            data.objectId = objectId;
            data.userType = userType;
            console.log(status);
            $.ajax({
                url: "/tribeRoute/tribe/userType",
                type: 'post',
                data: data,
                cache: false,
                success: function (res) {
                    if (res == 1) {
                        grid2.reload();
                    } else {
                        alert("出现错误");
                    }

                },

                error: function (error) {
                    console.log(error)
                }
            });
        }
    };
</script>
</html>
